@charset "UTF-8";
/**
 * _index.scss 主页
 * @author Kayo
 * @date 2015-07-04
 *
 * #common 通用部分
 * #banner 头部大 Banner
 * #cnt 主体内容
 * #foot 页脚
 * #star Github Star 引导
 * #responsive 响应式
 */

@use "sass:math";

// #common 通用部分

// 通用栏目
.index_column {
    position: relative;
    margin-bottom: 58px;

    &:before {
        content: ".";
        position: absolute;
        bottom: 0;
        left: $index_column_separator_spacingHorizontal;
        right: $index_column_separator_spacingHorizontal;
        font-size: 0;
        border-top: 1px solid $common_color_separator;

        @include screenResolution(2) {
            transform: scaleY(.5);
        }
        @include screenResolution(3) {
            transform: scaleY(math.div(1, 3));
        }
    }

    &:last-child {
        margin-bottom: 0;

        &:before {
            content: normal;
        }
    }
}

.index_column_title {
    margin-bottom: 22px;
    font-size: 34px;
}

.index_column_desc {
    color: $common_color_lightGray;
    font-size: 16px;
    line-height: 36px;
}

.index_column_mobileDesc {
    display: none;
    line-height: 28px;
    font-size: 16px;
    text-align: left;

    p {
        margin-top: 31px;

        &:first-child {
            margin-top: 0;
        }
    }
}

// 通用按钮
@mixin ghostBtn($borderColor: #fff, $textColor: #fff) {
    display: inline-block;
    min-width: 100px;
    margin-bottom: 20px;
    padding: 8px 32px;
    font-size: 17px;
    text-align: center;
    border: 1px solid $borderColor;
    border-radius: 6px;
    color: $textColor;
    user-select: none;
    @extend %commonAnimation;

    &:hover {
        text-decoration: none;
    }

    @include forMobile() {
        padding-left: 25px;
        padding-right: 25px;
    }
}

.index_downloadBtn {
    @include ghostBtn(#474860, #4E4F66);

    &:hover {
        border-color: #676884;
        background-color: #676884;
        color: #fff;
    }
    &:active {
        border-color: #474860;
        background-color: #474860;
    }
}

// #banner 头部大 Banner
.index_banner {
    padding: 75px 0 85px;
    @include gradient_vertical($start-color: $frame_head_background, $end-color: #06DCE9, $start-percent: 0%, $end-percent: 100%);
    text-align: center;
    -webkit-font-smoothing: antialiased;

    .dm_icon {
        margin-bottom: 48px;
        vertical-align: top;
    }
    .dm_icon_BannerMobileLogo {
        display: none;
    }
}

.index_banner_desc {
    margin-bottom: 49px;
    color: #fff;
    font-size: 30px;
    line-height: 52px;
}

.index_banner_startBtn,
.index_banner_githubBtn,
.index_banner_updateBtn {
    @include ghostBtn();
    width: $index_banner_smallBtn_width;
    height: 45px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 44px;
    box-sizing: border-box;
    vertical-align: top;

    &:hover {
        background-color: rgba(255, 255, 255, .2);
        color: #fff;
    }
    &:active {
        background-color: #fff;
        color: #04DACD;
    }
}

.index_banner_startBtn {
    margin-left: $index_banner_startBtn_marginLeft;
}

.index_banner_githubBtn {
    font-size: 20px;
}

.index_banner_updateBtn {
    width: $index_banner_smallBtn_width * 2 + $index_banner_startBtn_marginLeft;
}

.index_banner_version {
    color: #fff;
    font-size: 14px;
}

// #cnt 主体内容
.index_cnt {
    margin-bottom: 70px;
    text-align: center;
    -webkit-font-smoothing: antialiased;
}

.index_cnt_inside {
    width: $frame_base_width;
    margin: 0 auto;
    padding-top: 88px;
}

.index_cnt_purpose {
    padding-bottom: 58px;
}

.index_cnt_ability {
    padding-bottom: 42px;
}

.index_cnt_ability_list {
    @include clear;
}

.index_ability_item {
    float: left;
    width: 50%;
    margin-bottom: 40px;
    padding-right: 35px;
    vertical-align: top;
    box-sizing: border-box;

    .dm_icon {
        margin-bottom: 10px;
    }
}

.index_ability_item_title {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: bold;
    color: $common_color_darkGray;
}

.index_ability_item_cnt {
    color: $common_color_lightGray;
    font-size: 15px;
    line-height: 1.7;
}

.index_ability_item_Even {
    padding-right: 0;
    padding-left: 35px;
}

.index_appIntro {
    margin-bottom: 53px;
    padding-bottom: 50px;
}

.index_appIntro_desc {
    margin-bottom: 46px;
}

.index_appIntro_img {
    display: block;
    width: $index_appIntro_img_width;
    height: $index_appIntro_img_height;
    margin: 0 auto 80px;
    background: url($images_path + "App.png") no-repeat;
    background-size: 100%;
    box-shadow: 0 20px 30px 0 #CFDCE6;

    @include screenResolution(2) {
        background-image: url($images_path + "App_2x.png");
    }
}

@supports (filter: drop-shadow($index_appIntro_img_dropShadow)) {
    .index_appIntro_img {
        box-shadow: none;
        filter: drop-shadow($index_appIntro_img_dropShadow);
    }
}

.index_project_desc {
    margin-bottom: 42px;
}

.index_project_list_item {
    margin-left: 44px;
    line-height: 0;
    vertical-align: top;

    &:first-child {
        margin-left: 0;
    }
}

// #foot 页脚
.index_foot {
    padding: 72px 0 75px;
    background-color: #f8f9fa;
    color: $common_color_lightGray;
    text-align: center;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;

    .dm_icon {
        margin-bottom: 22px;
    }
}

// #responsive 响应式
@include forMobile() {
    .index_banner {
        padding: 30px $frame_base_mobile_paddingHorizontal 25px $frame_base_mobile_paddingHorizontal;

        .dm_icon {
            margin-bottom: 21px;
        }
    }
    .index_banner .dm_icon_BannerLogo {
        display: none;
    }
    .index_banner .dm_icon_BannerMobileLogo {
        display: inline-block;
    }
    .index_banner_desc {
        margin-bottom: 33px;
        font-size: 18px;
        line-height: 26px;
    }
    .index_banner_startBtn,
    .index_banner_githubBtn {
        margin-left: $index_banner_startBtn_mobile_marginHorizontal;
        margin-right: $index_banner_startBtn_mobile_marginHorizontal; // 为了确保按钮竖排时可以居中对齐，因此左右都加 margin
        margin-bottom: 15px;
    }
    .index_banner_updateBtn {
        width: $index_banner_smallBtn_width * 2 + $index_banner_startBtn_mobile_marginHorizontal * 2; // 因为开始使用和 Github 按钮此时左右都有 margin，因此两个按钮的中间距离是 $index_banner_startBtn_mobile_marginHorizontal * 2
    }

    .index_cnt {
        margin-bottom: 38px;
    }
    .index_cnt_inside {
        width: auto;
        padding-top: 40px;
        padding-left: $frame_base_mobile_paddingHorizontal;
        padding-right: $frame_base_mobile_paddingHorizontal;
    }
    .index_column {
        margin-bottom: 50px;

        &:before {
            left: 50%;
            right: auto;
            width: 100px;
            margin-left: -50px;
        }
    }

    .index_column_title {
        margin-bottom: 30px;
        font-size: 22px;
    }
    .index_column_desc {
        display: none;
    }
    .index_column_mobileDesc {
        display: block;
    }

    .index_appIntro_img {
        height: auto;
        width: $index_appIntro_img_mobile_width;
        padding-bottom: math.div($index_appIntro_img_height, $index_appIntro_img_width) * $index_appIntro_img_mobile_width;
    }
    .index_appIntro_desc {
        margin-bottom: 30px;
    }

    .index_ability_item {
        float: none;
        width: auto;
        margin-bottom: 35px;
        padding-left: 0;
        padding-right: 0;
    }

    .index_ability_item_title {
        font-size: 16px;
    }
    .index_ability_item_cnt {
        font-size: 16px;
    }

    .index_appIntro_downloadDirect {
        display: none;
    }

    .index_project_desc {
        margin-bottom: 23px;
        font-size: 16px;
    }
    .index_project_list_item {
        display: block;
        margin: 16px auto 0;

        &:first-child {
            margin-top: 0;
            margin-left: auto; // 重置之前的 .index_project_list_item:first-child 样式
        }
    }

    .index_foot {
        padding-top: 70px;
        padding-bottom: 70px;

        .qw_icon {
            margin-bottom: 28px;
            vertical-align: top;
        }
    }
}

// 宽度不足以横排 Banner 两个按钮时
@media handheld and (max-width: $index_banner_only_single_btn_screen_width), screen and (max-width: $index_banner_only_single_btn_screen_width) {
    .index_banner_updateBtn {
        width: $index_banner_smallBtn_width;
        font-size: 0;

        &:before {
            content: "升级到 2.0";
            font-size: 17px;
        }
    }
}
